/*
 * @Author: xiaosihan 
 * @Date: 2024-02-22 13:24:06 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-02-22 13:46:30
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./textureManageModal.module.less";
import { Button, Modal } from "antd";
import textureManager from "@/editorComponent/textureManager";
import designEditor from "@/editorComponent/designEditor";

interface Iprops {
  children?: ReactNode
}

// 纹理管理弹窗
export default function TextureManageModal(props: Iprops) {

  const dom = useRef<HTMLDivElement | null>(null);
  const [open, setOpen] = useState(false);

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {

  }), []);

  const canvas = textureManager.getAllCanvas();
  const transparentCanvas = textureManager.getAllTansparentCanvas();

  return (
    <>
      <Button
        className={styles.btn}
        onClick={() => setOpen(true)}
      >查看纹理</Button>

      <Modal
        open={open}
        centered={true}
        width={900}
        onCancel={() => setOpen(false)}
        onOk={() => setOpen(false)}
      >
        <div className={styles.textureManageModal} key={new Date().valueOf()}>
          <p>带背景的纹理</p>
          {

            Object.keys(canvas).map((key, i) => {
              return <div className={styles.textureItem} key={i}>
                <div className={styles.container} ref={dom => dom && dom.appendChild(canvas[key])} >
                </div>
                <p className={styles.name} >{key}</p>
              </div>;
            })
          }
          <p>透明背景的纹理</p>
          {
            Object.keys(transparentCanvas).map((key, i) => {
              return <div className={styles.textureItem} key={i}>
                <div className={styles.container} ref={dom => dom && dom.appendChild(transparentCanvas[key])} >
                </div>
                <p className={styles.name} >{key}</p>
              </div>;
            })
          }
          <p>裁剪纹理</p>
          {
            [...designEditor.fabricMarkMap.keys()].map((key, i) => {
              return <div className={styles.textureItem} key={i}>
                <div className={styles.container} ref={dom => dom && dom.appendChild(designEditor.fabricMarkMap.get(key)!.cacheCanvas)} >
                </div>
                <p className={styles.name} >{key}</p>
              </div>;
            })
          }
        </div>
      </Modal>
    </>
  );

}